<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>打印测试页</title>
    <style>
        input{
            width: 100px;
            padding: 5px 10px;
            margin-left: 5px;
        }
    </style>
    <script src="print.js"></script>
</head>
<body>
    <div id="content" >
        <div style="border:1px solid;padding: 10px;">  
            打印测试页
            <span style="float:right;">打印测试页</span>
         </div>
    </div>
    <form style="margin-top:10px;" id="parms" action>
        左位移<input type="text" name="offsetLeft">
        上位移<input type="text" name="offsetTop">
        左右边距<input type="text" name="padding">
        上边距<input type="text" name="paddingTop">
        <button type="button" onclick="setConentSize()">保存</button>
    </form>
    <div style="margin-top:10px;text-align: right">   
        <button onclick="printPortrait()">纵向打印</button>
        <button onclick="printLandpace()">横向打印</button>
        <button onclick="print()">无方向打印</button>
    </div>
    <div>
        <h5 style="margin :5px 0;">备注</h5>
        <ul style="margin :5px 0;">
            <li>调整好打印机纸张，打印打印机测试页，查看是否正常。
                <br>打印机可能适配多套系统，所以预先调好打印机很重要，避免适配好了我们系统，影响了其他。</li>
            <li>
                    打印一次纸质收据，打印一次xps文件。之后调整先打成xps文件，与第一次的xps进行对比，确定差不多再打纸质收据，节约纸张。
            </li>
        </ul>
    </div>
</body>
<script>
    var pcontent=document.getElementById('content').outerHTML,
        form=document.forms[0];
    function setConentSize(){
        var eles=form.elements;
        var style=document.getElementById('content').style;
        style.marginLeft=eles.offsetLeft.value+'px';
        style.marginTop=eles.offsetTop.value+'px'
        style.paddingLeft=eles.padding.value+'px'
        style.paddingRight=eles.padding.value+'px'
        style.paddingTop=eles.paddingTop.value+'px';

        pcontent=document.getElementById('content').outerHTML;
    }
    function print(){
        webPrint([
            {
                content:pcontent
            }
        ],'',-1)
    }
    function printLandpace(){
        webPrint([
            {
                content:pcontent
            }
        ],'',true)
    }
    function printPortrait(){
        webPrint([
            {
                content:pcontent
            }
        ],'')
    }
    
</script>
</html>